<template>
   <div id="paradiseleft" class="container-fluid" >
       <div class="row bgcolorqi1" >
           <div class=" col-md-4"   v-for="(v,k) in paradises">
               <button type="button" class="btn btn-sm bgcolorsh" :class="bgclass(k)"  :key="k" v-text="v.name" @click="bgcolor(k)"> </button>
           </div>
       </div>
           
        <div class="mod-bottom row bgcolorqi1" >
           <div class=" col-md-12"   v-for="(v,k) in paradisesindex">
            <router-link class="mo-block bgcolorsh rounded"  :key="k" v-text="v.name" :to="{ name: 'paradise', query: { id: id(k) }}"  >
            </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'paradiseleft',
        data() {
            return {
                paradises: paradises,
                indexs: 0,
                paradisesindex: paradises[0].mode
            }
        },
        mounted() {

        },
        methods: {
            bgcolor(i) {
                this.indexs = i
                this.modeindex = modulars[i].mode
            },
            bgclass(k) {
                if (k == this.indexs) {
                    return 'bg-info'
                }
            },
            id(i) {
                return (i + 1) * (this.indexs + 1)
            }
        }
    };

</script>


<style scoped>
    .bgcolorqi1 {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .btn-sm {
        margin-top: 2px;
        margin-bottom: 2px;
        font-size: 12px; 
        border: 1px solid rgb(255, 247, 153);
    }

    .mod-bottom {
        margin-top: 3px;
    }



    .col-md-6 {
        padding: 0;
    }

    .mo-block {
        display: block;
        line-height: 75px;
        width: 150px;
        height: 150px;
        border: 5px solid rgb(255, 247, 153);
        margin: 5px;
        text-align: center;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    }
    .mo-block:hover {
        border-color: #28a745!important
    }
    .router-link-exact-active {
        border-color: #28a745!important
    }

</style>
